<template>
  <div>
    <div class="xt">
      <section v-for="jiancai in jiancais" :key="jiancai.id">
        <img :src="jiancai.imgss" />
        <p class="x1">{{ jiancai.p }}</p>
        <div class="x2">
          <span class="xx">{{ jiancai.s }}</span>
          <span class="xxx">{{ jiancai.q }}</span>
          <span class="xxxx">{{ jiancai.j }}</span>
        </div>
        <div class="x3">
          <div class="zuo">
            <span class="iconfont icon-31wode"></span>
            <p class="ww">{{ jiancai.yonghu }}</p>
          </div>
          <div class="you">
            <span class="iconfont icon-yanjing">
              <span class="in">{{ jiancai.renshu }}</span></span
            >
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "change",
  data() {
    return {
      jiancais: [],
    };
  },
  created() {
    axios({
      url: "http://localhost:3000/jiancais",
    }).then((res) => {
      // console.log(res.data);
      this.jiancais = res.data;
      console.log(this.jiancais);
      // console.log(this.banks);
    });
  },
};
</script>
<style scoped>
.xt {
  display: flex;
  justify-content: space-around;
  /* flex-direction: column; */
  /* align-items: center; */
  flex-wrap: wrap;
  
}
.xt section {
  width: 48%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  margin-top: .1rem;
}
.xt .x1 {
  color: #090a0c;
  font-size: 0.14rem;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
img {
  /* width: 100%; */
  /* height: 100%; */
  /* height: .5rem; */
  width: 1.7rem;
  height: 1.7rem;
}
.xt .x2 {
  width: 1.5rem;
  /* background-color: red */
}
.xt .x2 .xx {
  padding: 0 0.03rem;
  border: 1px solid #9b9b9b;
  font-size: 0.14rem;
  text-align: center;
}
.xt .x2 .xxx {
  padding: 0 0.03rem;
  border: 1px solid #9b9b9b;
  font-size: 0.14rem;
  margin-left: 0.07rem;
}
.xt .x2 .xxxx {
  padding: 0 0.03rem;
  border: 1px solid #9b9b9b;
  font-size: 0.14rem;
  margin-left: 0.07rem;
}
.xt .x3 {
  display: flex;
  margin-top: 0.2rem;
  /* margin-left: -0.5rem; */
  width: 2rem;
  /* background-color: red; */
  text-align: center;
  justify-content: space-around;
}
.xt .x3 .icon-31wode {
  margin-left: 0.09rem;
  font-size: 0.2rem;
  margin-right: 0.05rem;
}
.xt .x3 .icon-yanjing {
  margin-left: 0.4rem;
}
.xt .x3 .ww {
  font-size: 0.14rem;
}
.xt .x3 .in {
  margin-left: 0.1rem;
  font-size: 0.12rem;
}
.xt .x3 .zuo {
  display: flex;
}
.xt .x3 .you {
  display: flex;
}
</style>